<template>
	<div class="helppoor">
		<div class="helppoor-list">
			<ul class="list" v-for="(item, index) in listData" :key="index" @click="toDetail(item.id)">
				<li>
					<div class="img-box">
						<img :src="item.smallPic" alt="">
					</div>
					<div class="list-content">
						<div class="top">
							<span class="title">{{item.productName}}</span>
							<span class="subtitle">{{item.originCity}}</span>
						</div>
						<div class="center">
							<span class="by">{{item.saleType}}</span>
							<span class="by">{{item.postage}}</span>
						</div>
						<div class="bottom">
							<span class="text"><img src="@/assets/img/home_img10.png" alt="">{{item.aidName}}</span>
							<span class="price"> <i>{{item.salePrice}}</i>{{item.salePriceUnit}}</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	import Storage from "@/utils/storage";
	import AdingCom from '@/components/homeCom/AidingCom.vue'
	export default {
		components: {
			AdingCom
		},
		data(){
			return {
				postData: {
					pgCt: 1,
					pgSz: 10
				},
				listData: []
			}
		},
		created(){
			this.getData();
		},
		methods: {
			getData(){
				this.$api.get('/api/fungus/product_list', this.postData)
				.then(({data})=>{
					this.listData = data.records;
				})
			},
			toDetail(id){
				if(Storage.get('gradeId')){ // 在这里删除gradeId,避免进去数据错误
					Storage.del('gradeId')
				}
				
				if(Storage.get('active')){
					Storage.del('active')
				}
				this.$router.push({
					path: '/helppoor/pot/detail/' + id
				})
			},
			
		},
		
	
	
	}
	
	
</script>

<style lang="scss" scoped>
	.helppoor{
		background-color: #fff;
		width: 100%;
		height: 100%;
		.helppoor-list{
			
			.list{
				width: 100%;
				height: 109px;
				padding: 16px;
				border-bottom: 1px solid #e5e5e5;
				li{
					display: flex;
					.img-box{
						width: 78px;
						height: 78px;
						img{
							width: 100%;
							height: 100%;
							border-radius:9px;
							
						}
					}
					.list-content {
						flex: 1;
						padding-left: 16px;
						.top{
							display: flex;
							justify-content: space-between;
							margin-bottom: 13px;
							.title{
								font-size: 16px;
								color: #344047;
							}
							.subtitle{
								color: #969C9E;
							}
						}
						.center{
							margin-bottom: 13px;
							.by{
								display: inline-block;
								width: 40px;
								border: 1px solid #31BC8D;
								font-size: 12px;
								color: #31BC8D ;
								line-height: normal;
								text-align: center;
								border-radius:4px;
								&:nth-child(2){
									margin-left: 10px;
								}
							}
						}
						.bottom {
							display: flex;
							justify-content: space-between;
							.text{
								color: #969C9E;
								font-size: 12px;
								img{
									width: 11px;
									margin-right: 4px;
								}
							}
							.price{
								font-size: 12px;
								color: #969C9E;
								i{
									color: #F58523;
									font-weight: 500;
									font-size: 14px;
									margin-right: 2px;;
								}
							}
						}
					}
				}
			}
		}
	}
	
	
</style>
